<template>
	<view>
		<view class="question-header">
			<view class="layout">				
				<view class="question-header-icon" @click="handleBackedButton()">
					<image src="/static/icon/icon-back.png"></image>
				</view>
				<view class="question-header-tooltip">答题卡</view>
				<view class="question-header-icon">
					<image src="../../../static/icon/icon-share.png"></image>
				</view>
			</view>
		</view>
		<view class="dashboard layout">
			<view class="dashboard-block layout">
				<view class="dashboard-block-icon">
					<image src="../../../static/logo.png"></image>
				</view>
				<view class="dashboard-block-text">
					<view class="layout">
						<view>20</view>
						<view>%</view>
					</view>
					<view>正确率</view>
				</view>
			</view>
			<view class="dashboard-block layout">
				<view class="dashboard-block-icon">
					<image src="../../../static/logo.png"></image>
				</view>
				<view class="dashboard-block-text">
					<view class="layout">
						<view>22</view>
						<view>秒</view>
					</view>
					<view>用时</view>
				</view>
			</view>
		</view>
		<view class="answercard">
			<view class="answercard-node">单选题</view>
			<view class="answercard-box layout-left flex-wrap">
				<view class="answercard-box-item answercard-box-right">01</view>
				<view class="answercard-box-item answercard-box-right">02</view>
				<view class="answercard-box-item answercard-box-right">03</view>
				<view class="answercard-box-item">04</view>
				<view class="answercard-box-item">05</view>
				<view class="answercard-box-item">01</view>
				<view class="answercard-box-item answercard-box-waring">02</view>
				<view class="answercard-box-item">03</view>
				<view class="answercard-box-item answercard-box-waring">04</view>
				<view class="answercard-box-item answercard-box-waring">05</view>
				<view class="answercard-box-item">01</view>
				<view class="answercard-box-item answercard-box-waring">02</view>
				<view class="answercard-box-item">03</view>
				<view class="answercard-box-item">04</view>
				<view class="answercard-box-item">05</view>
			</view>
		</view>
		<view class="card-button">
			<view class="card-button-block">
				提交，解锁报告
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			handleBackedButton:function(){
				uni.redirectTo({
					url:"/pages/examine/main/main"
				})
			},
			
		}
	}
</script>

<style>
page { background: #ededed; padding-top: 160rpx; padding-bottom: 120rpx; }

.question-header { position: fixed; top: 0; left: 0; right: 0; background: #fff; }
.question-header { padding-top:var(--status-bar-height);}
.question-header-icon { width: 40rpx; height: 40rpx; padding-top:30rpx; padding-left: 25rpx;}
.question-header-tooltip { width: 650rpx; height: 50rpx; padding: 25rpx 0; font-size: 18px; font-weight: bold; }
.question-header-tooltip { text-align: center;}

.dashboard { width: 650rpx; margin: 0 auto; padding: 25rpx; background: #fff; margin-bottom: 25rpx; border-radius: 15rpx; }
.dashboard-block { width: 240rpx; padding-left: 60rpx; }
.dashboard-block-icon { width: 30rpx; height: 30rpx; padding-top: 25rpx; margin-right: 25rpx; }

.answercard {}
.answercard { width: 650rpx; margin: 0 auto; padding: 25rpx; background: #fff; margin-bottom: 25rpx; border-radius: 15rpx; }

.answercard-box { padding: 15rpx 0;}
.answercard-node { font-size: 18px; font-weight: 900; padding-bottom: 15rpx; }
.answercard-box-item { margin: 0 15rpx; width: 100rpx; height: 100rpx; text-align: center; line-height: 100rpx; background: #ededed; border-radius: 100rpx; }
.answercard-box-item { font-size: 18px; font-weight: bold; color: #999; margin-bottom: 25rpx;}
.answercard-box-waring { background: red; color: #fff; }
.answercard-box-right { background: green; color: #fff;}

.card-button { position: fixed; left: 0; bottom: 0; right: 0; padding-bottom: 15rpx; }
.card-button-block { background: blue; color: #fff; width: 600rpx; margin: 0 auto; text-align: center; }
.card-button-block { padding: 15rpx 0; border-radius: 45rpx;}
</style>
